// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f0f2f5;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

// 链接样式
a {
  color: #1890ff;
  text-decoration: none;
  &:hover {
    color: #40a9ff;
  }
}

// 通用样式类
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

// 间距类
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}

.mb-1 {
  margin-bottom: 8px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mb-4 {
  margin-bottom: 32px;
}

.ml-1 {
  margin-left: 8px;
}
.ml-2 {
  margin-left: 16px;
}
.ml-3 {
  margin-left: 24px;
}
.ml-4 {
  margin-left: 32px;
}

.mr-1 {
  margin-right: 8px;
}
.mr-2 {
  margin-right: 16px;
}
.mr-3 {
  margin-right: 24px;
}
.mr-4 {
  margin-right: 32px;
}

// 字体大小类
.text-sm {
  font-size: 12px;
}
.text-base {
  font-size: 14px;
}
.text-lg {
  font-size: 16px;
}
.text-xl {
  font-size: 18px;
}
.text-2xl {
  font-size: 20px;
}
.text-3xl {
  font-size: 24px;
}

// 字体粗细类
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-bold {
  font-weight: 600;
}

// 颜色类
.text-primary {
  color: #1890ff;
}
.text-success {
  color: #52c41a;
}
.text-warning {
  color: #faad14;
}
.text-danger {
  color: #ff4d4f;
}
.text-gray {
  color: #8c8c8c;
}

// 背景色类
.bg-primary {
  background-color: #1890ff;
}
.bg-success {
  background-color: #52c41a;
}
.bg-warning {
  background-color: #faad14;
}
.bg-danger {
  background-color: #ff4d4f;
}
.bg-gray {
  background-color: #f5f5f5;
}

// 圆角类
.rounded-sm {
  border-radius: 2px;
}
.rounded {
  border-radius: 4px;
}
.rounded-lg {
  border-radius: 8px;
}
.rounded-full {
  border-radius: 9999px;
}

// 阴影类
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

// 过渡类
.transition {
  transition: all 0.3s ease;
}
.transition-fast {
  transition: all 0.15s ease;
}
.transition-slow {
  transition: all 0.45s ease;
}
